<template>
    <div class="tatol">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">    
        <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>    
    <ul class="nav nav-sidebar">
        <router-link :to="/newsDetails/+item.id" v-for="item in newlist" :key="item.id"   v-slot="{ navigate  }" >
        	<!-- navigate: 控制点击跳转组件 | :class="{ 'active': isActive}" 此行控制路由激活样式  -->
            <li @click="navigate" @keypress.enter="navigate"    class="channel">
            <div><img :src="item.img_url" alt=""></div>
            <div class="titlemodul"><h3>{{item.title}}</h3>
             <span>时间:{{ $filters.dataformat(item.add_time)  }}</span>
              <span class="rr">热度:{{item.click}}</span>
    </div>
            </li>
        </router-link>
    </ul>
 
</van-list>
</van-pull-refresh>
    </div>
    <backtop :top="100" />
    
</template>

<script>
import backtop from "./backtop.vue"
import {fetchNewsList }  from '@/API/goods.js'
import { ref } from 'vue';
export default {
    setup(){
    const newlist = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const page=ref(0)
    const num=ref(8)
    const onLoad =async () => {
    page.value++

        if (refreshing.value) {
        newlist.value = [];
        refreshing.value = false;
        }
         let result = await fetchNewsList(page.value,num.value)
        console.log(page.value,num.value, "得到的数据",result.message);
        newlist.value= [...newlist.value,...result.message]
        // console.log(newlist.value);
        loading.value = false;
        if (result.message.length == 0) {
          finished.value = true;
        }

    };

    const onRefresh = () => {
      // 清空列表数据
      page.value=0
      console.log( newlist.value);
      finished.value = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
    return {
      newlist,
      onLoad,
      loading,
      finished,
      refreshing,
      onRefresh
    };
    },

    methods:{
        getid(data){
             this.id = data
             console.log(this.id);
             this.$router.push("/newdetails/"+this.id)
         },
    },
    components:{
        backtop
    }
}
</script>

<style lang="scss" scoped>
.channel{
    margin: 0.5rem ;
    border-bottom: 1px solid #cfcbcb;
    display: flex;
     color: #666;   
    .titlemodul{
        margin-left: 0.5rem;
        position: relative;
    }
    img{
        width: 4rem;
        height: 4rem;
    }
    h3{
        font-size: 0.7rem;
        font-weight: 700;
        margin-top:0.1rem;
        color: #666;
    }
    
    span{
        position: absolute;
        bottom: 0.3rem;
        font-size: 0.6rem;
      
    }
    .rr{
        right: 1rem;
    }
    
}
</style>